<!-- src/components/Register.vue -->
<template>
    <div>
      <h1>注册页面</h1>
      <form @submit.prevent="register">
        <div>
          <label for="name">姓名:</label>
          <input type="text" id="name" v-model="name" required>
        </div>
        <div>
          <label for="gender">性别:</label>
          <select id="gender" v-model="gender" required>
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        <div>
          <label for="age">年龄:</label>
          <input type="number" id="age" v-model="age" required>
        </div>
        <div>
          <label for="phone">电话号码:</label>
          <input type="text" id="phone" v-model="phone" required>
        </div>
        <div>
          <label for="personalId">个人专属号码:</label>
          <input type="text" id="personalId" v-model="personalId" required>
        </div>
        <button type="submit">注册</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RegisterPage',
    data() {
      return {
        name: '',
        gender: '',
        age: null,
        phone: '',
        personalId: ''
      };
    },
    methods: {
      register() {
        let users = JSON.parse(localStorage.getItem('users')) || [];
        users.push({
          name: this.name,
          gender: this.gender,
          age: this.age,
          phone: this.phone,
          personalId: this.personalId
        });
        localStorage.setItem('users', JSON.stringify(users));
        alert('注册成功');
        this.$router.push('/login');
      }
    }
  };
  </script>
  
  <style scoped>
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: #f5f5dc;                          /* 与登录页面相同的背景色 */
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;

}

h1 {
  margin-bottom: 20px;
  color: #333;
  font-size: 2em;                                        /* 标题字体大小 */
}

form {
  width: 400px;
  max-width: 400px;                                      /* 表单最大宽度 */
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 700px;
}

form > div {
  margin-bottom: 0px;                                    /* 表单项之间的间距 */
}

label {
  display: block;                                        /* 使标签独占一行 */
  margin-bottom: 5px;
  color: #666;
}

input, select {
  width: 100%;                                           /* 使输入框和下拉选择框宽度充满其父元素 */
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ddd;                             /* 边框颜色 */
  border-radius: 8px;                                   /* 边框圆角 */
  font-size: 1em;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #333;                             /* 与登录页面相同的按钮背景色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #555;                             /* 鼠标悬停时的背景色 */
}

button:active {
  background-color: #222;                            /* 按钮被按下时的背景色 */
}
  </style>